html
<template>
  <div class="modern-list-container">
    <!-- 主内容区域 -->
    <div v-if="showFlag" class="modern-list-content">
      <!-- 搜索和操作区域 -->
      <div class="modern-toolbar">
        <!-- 搜索栏 -->
        <div class="modern-search-panel">
        <el-form class="modern-search-form">
          <div class="search-group">
            <el-input
              v-model="searchForm.indexNameSearch"
              placeholder="中医药文化知识科普类型"
              class="modern-search-input"
              prefix-icon="el-icon-search"
              clearable
            >
              
            </el-input>
            <el-button
              type="primary"
              class="modern-search-btn"
              @click="search"
              icon="el-icon-search"
            >查询</el-button>
          </div>
        </el-form>
      </div>
        <!-- 操作按钮组 -->
        <div class="action-toolbar">
        <el-button-group  class="action-group">
          <el-tooltip content="新增" v-if="isAuth('dictionaryXiqukepu','新增')">
            <el-button
              type="success"
              icon="el-icon-plus"
              class="modern-action-btn"
              @click="addOrUpdateHandler()"
            >新增</el-button>
          </el-tooltip>
          
          <el-tooltip content="删除" v-if="isAuth('dictionaryXiqukepu','删除')">
            <el-button
              type="danger"
              icon="el-icon-delete"
              class="modern-action-btn"
              :disabled="dataListSelections.length <= 0"
              @click="deleteHandler()"
            >删除</el-button>
          </el-tooltip>
        </el-button-group >
      </div>
      </div>

      <!-- 数据表格 -->
      <div class="modern-table-wrapper">
        <el-table
          :data="dataList"
          class="modern-data-table"
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandler"
        >
          <el-table-column 
            v-if="contents.tableSelection"
            type="selection"
            width="48"
            align="center"
          ></el-table-column>

          <el-table-column 
            label="索引" 
            v-if="contents.tableIndex" 
            type="index" 
            width="64"
            align="center"
          >
            <template slot-scope="scope">
              <span class="index-badge">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column 
            prop="codeIndex"
            label="类型编码"
            min-width="200"
          >
            <template slot-scope="scope">
              <div class="code-cell">
                <i class="el-icon-collection"></i>
                <span class="code-text">{{ scope.row.codeIndex }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column 
            prop="indexName"
            label="类型名称"
            min-width="240"
          >
            <template slot-scope="scope">
              <div class="name-tag">
                <el-tag type="warning" effect="light">
                  <i class="el-icon-notebook-2"></i>
                  {{ scope.row.indexName }}
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column 
            label="操作" 
            width="220" 
            fixed="right"
            align="center"
          >
            <template slot-scope="scope">
              <div class="table-actions">
                <el-tooltip content="详情" v-if="isAuth('dictionaryXiqukepu','查看')">
                  <el-button
                    type="text"
                    icon="el-icon-tickets"
                    class="action-btn"
                    @click="addOrUpdateHandler(scope.row.id,'info')"
                  >详情</el-button>
                </el-tooltip>

                <el-tooltip content="修改" v-if="isAuth('dictionaryXiqukepu','修改')">
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    class="action-btn"
                    @click="addOrUpdateHandler(scope.row.id)"
                  >修改</el-button>
                </el-tooltip>

                <el-tooltip content="删除" v-if="isAuth('dictionaryXiqukepu','删除')">
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="action-btn"
                    @click="deleteHandler(scope.row.id)"
                  >删除</el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="modern-pagination">
          <el-pagination
            background
            :page-sizes="[10, 20, 50, 100]"
            :page-size="Number(contents.pageEachNum)"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 新增/修改弹窗 -->
    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
  </div>
</template>
<script>
    import AddOrUpdate from "./add-or-update";
    import styleJs from "../../../utils/style.js";
    export default {
        data() {
            return {
                searchForm: {
                    key: ""
                },
                form:{},
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                showFlag: true,
                sfshVisiable: false,
                shForm: {},
                chartVisiable: false,
                addOrUpdateFlag:false,
                contents:null,
                layouts: '',



            };
        },
        created() {
            this.contents = styleJs.listStyle();
            this.init();
            this.getDataList();
            this.contentStyleChange()
        },
        mounted() {

        },
        filters: {
            htmlfilter: function (val) {
                return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
            }
        },
        components: {
            AddOrUpdate,
        },
        methods: {
            contentStyleChange() {
                this.contentSearchStyleChange()
                this.contentBtnAdAllStyleChange()
                this.contentSearchBtnStyleChange()
                this.contentTableBtnStyleChange()
                this.contentPageStyleChange()
            },
            contentSearchStyleChange() {
                this.$nextTick(()=>{
                    document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
                    let textAlign = 'left'
                    if(this.contents.inputFontPosition == 2) textAlign = 'center'
                if(this.contents.inputFontPosition == 3) textAlign = 'right'
                el.style.textAlign = textAlign
                el.style.height = this.contents.inputHeight
                el.style.lineHeight = this.contents.inputHeight
                el.style.color = this.contents.inputFontColor
                el.style.fontSize = this.contents.inputFontSize
                el.style.borderWidth = this.contents.inputBorderWidth
                el.style.borderStyle = this.contents.inputBorderStyle
                el.style.borderColor = this.contents.inputBorderColor
                el.style.borderRadius = this.contents.inputBorderRadius
                el.style.backgroundColor = this.contents.inputBgColor
            })
                if(this.contents.inputTitle) {
                    document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
                        el.style.color = this.contents.inputTitleColor
                    el.style.fontSize = this.contents.inputTitleSize
                    el.style.lineHeight = this.contents.inputHeight
                })
                }
                setTimeout(()=>{
                    document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
                    el.style.color = this.contents.inputIconColor
                el.style.lineHeight = this.contents.inputHeight
            })
                document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
                    el.style.color = this.contents.inputIconColor
                el.style.lineHeight = this.contents.inputHeight
            })
                document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
                    el.style.lineHeight = this.contents.inputHeight
            })
            },10)

            })
            },
            // 搜索按钮
            contentSearchBtnStyleChange() {
                this.$nextTick(()=>{
                    document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
                    el.style.height = this.contents.searchBtnHeight
                el.style.color = this.contents.searchBtnFontColor
                el.style.fontSize = this.contents.searchBtnFontSize
                el.style.borderWidth = this.contents.searchBtnBorderWidth
                el.style.borderStyle = this.contents.searchBtnBorderStyle
                el.style.borderColor = this.contents.searchBtnBorderColor
                el.style.borderRadius = this.contents.searchBtnBorderRadius
                el.style.backgroundColor = this.contents.searchBtnBgColor
            })
            })
            },
            // 新增、批量删除
            contentBtnAdAllStyleChange() {
                this.$nextTick(()=>{
                    document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
                    el.style.height = this.contents.btnAdAllHeight
                el.style.color = this.contents.btnAdAllAddFontColor
                el.style.fontSize = this.contents.btnAdAllFontSize
                el.style.borderWidth = this.contents.btnAdAllBorderWidth
                el.style.borderStyle = this.contents.btnAdAllBorderStyle
                el.style.borderColor = this.contents.btnAdAllBorderColor
                el.style.borderRadius = this.contents.btnAdAllBorderRadius
                el.style.backgroundColor = this.contents.btnAdAllAddBgColor
            })
                document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
                    el.style.height = this.contents.btnAdAllHeight
                el.style.color = this.contents.btnAdAllDelFontColor
                el.style.fontSize = this.contents.btnAdAllFontSize
                el.style.borderWidth = this.contents.btnAdAllBorderWidth
                el.style.borderStyle = this.contents.btnAdAllBorderStyle
                el.style.borderColor = this.contents.btnAdAllBorderColor
                el.style.borderRadius = this.contents.btnAdAllBorderRadius
                el.style.backgroundColor = this.contents.btnAdAllDelBgColor
            })
                document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
                    el.style.height = this.contents.btnAdAllHeight
                el.style.color = this.contents.btnAdAllWarnFontColor
                el.style.fontSize = this.contents.btnAdAllFontSize
                el.style.borderWidth = this.contents.btnAdAllBorderWidth
                el.style.borderStyle = this.contents.btnAdAllBorderStyle
                el.style.borderColor = this.contents.btnAdAllBorderColor
                el.style.borderRadius = this.contents.btnAdAllBorderRadius
                el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
            })
            })
            },
            // 表格
            rowStyle({ row, rowIndex}) {
                if (rowIndex % 2 == 1) {
                    if(this.contents.tableStripe) {
                        return {color:this.contents.tableStripeFontColor}
                    }
                } else {
                    return ''
                }
            },
            cellStyle({ row, rowIndex}){
                if (rowIndex % 2 == 1) {
                    if(this.contents.tableStripe) {
                        return {backgroundColor:this.contents.tableStripeBgColor}
                    }
                } else {
                    return ''
                }
            },
            headerRowStyle({ row, rowIndex}){
                return {color: this.contents.tableHeaderFontColor}
            },
            headerCellStyle({ row, rowIndex}){
                return {backgroundColor: this.contents.tableHeaderBgColor}
            },
            // 表格按钮
            contentTableBtnStyleChange(){
            },
            // 分页
            contentPageStyleChange(){
                let arr = []
                if(this.contents.pageTotal) arr.push('total')
                if(this.contents.pageSizes) arr.push('sizes')
                if(this.contents.pagePrevNext){
                    arr.push('prev')
                    if(this.contents.pagePager) arr.push('pager')
                    arr.push('next')
                }
                if(this.contents.pageJumper) arr.push('jumper')
                this.layouts = arr.join()
                this.contents.pageEachNum = 10
            },

            init () {
            },
            search() {
                this.pageIndex = 1;
                this.getDataList();
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let params = {
                    page: this.pageIndex,
                    limit: this.pageSize,
                    sort: 'id',
                }
                if(this.searchForm.indexNameSearch!='' && this.searchForm.indexNameSearch!=undefined){
                    params['indexName'] = this.searchForm.indexNameSearch
                }
                //本表的
                params['dicCode'] = "xiqukepu_types"//编码名字
                params['dicName'] = "中医药文化知识科普类型",//汉字名字
                this.$http({
                    url: "dictionary/page",
                    method: "get",
                    params: params
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                    this.dataList = data.data.list;
                    this.totalPage = data.data.total;
                } else {
                    this.dataList = [];
                    this.totalPage = 0;
                }
                this.dataListLoading = false;
            });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },
            // 多选
            selectionChangeHandler(val) {
                this.dataListSelections = val;
            },
            // 添加/修改
            addOrUpdateHandler(id,type) {
                this.showFlag = false;
                this.addOrUpdateFlag = true;
                this.crossAddOrUpdateFlag = false;
                if(type!='info'){
                    type = 'else';
                }
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id,type);
            });
            },
            // 删除
            deleteHandler(id) {
                var ids = id
                        ? [Number(id)]
                        : this.dataListSelections.map(item => {
                    return Number(item.id);
            });
                this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$http({
                    url: "dictionary/delete",
                    method: "post",
                    data: ids
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                    this.$message({
                        message: "操作成功",
                        type: "success",
                        duration: 1500,
                        onClose: () => {
                        this.search();
                }
                });
                } else {
                    this.$message.error(data.msg);
                }
            });
            });
            },


        }

    };
</script>
<style scoped>
.modern-list-container {
  --primary-color: #409EFF;
  --success-color: #67C23A;
  --danger-color: #F56C6C;
  --warning-color: #E6A23C;
  --border-color: #EBEEF5;
  --bg-base: #F5F7FA;
  --radius-md: 8px;
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.modern-list-content {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.modern-toolbar {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.search-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
  width: 90vw;
}

.modern-search-input {
  width: 280px;
}
.action-toolbar {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
}
.modern-search-input::v-deep .el-input__inner {
  height: 40px;
  border-radius: 20px;
  padding-left: 40px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-search-btn {
  padding: 12px 32px;
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.action-group {
  width: 90vw;
  display: flex;
  gap: 16px;
}

.modern-action-btn {
  padding: 10px 24px;
  border-radius: 20px;
  transition: all 0.3s ease;
}
.modern-search-panel {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}
.modern-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.modern-table-wrapper {
  padding: 0 24px 24px;
}

.modern-data-table::v-deep {
  --el-table-header-background-color: rgba(245, 247, 250, 0.95);
  --el-table-border-color: var(--border-color);
}

.modern-data-table::v-deep th {
  background: var(--el-table-header-background-color);
  backdrop-filter: blur(6px);
  font-weight: 600;
  color: var(--text-primary);
}

.modern-data-table::v-deep tr {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modern-data-table::v-deep tr:hover {
  transform: translateX(8px);
  box-shadow: 4px 0 16px rgba(64, 158, 255, 0.08);
}

.index-badge {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(64, 158, 255, 0.1), rgba(64, 158, 255, 0.2));
  color: var(--primary-color);
  font-weight: 600;
}

.code-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Courier New', monospace;
  color: var(--text-primary);
}

.code-text {
  padding: 4px 12px;
  background: rgba(64, 158, 255, 0.08);
  border-radius: 4px;
}

.name-tag .el-tag {
  /* padding: 8px 16px; */
  border-radius: 16px;
  font-size: 14px;
}

.table-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.action-btn {
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(64, 158, 255, 0.1);
  color: var(--primary-color);
}

.modern-pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .modern-toolbar {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .search-group {
    width: 100%;
  }
  
  .modern-search-input {
    width: 100%;
  }
  
  .action-group {
    justify-content: flex-end;
  }
  
  .table-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modern-list-content {
  animation: fadeSlideIn 0.4s ease-out;
}
</style>